<template>
	<div class="inputSearch">
		<div class="searchCont">
			<el-select :placeholder="seleplaceholder" v-model="seleceV" class="elselect" @change="getValue">
				<el-option :label="seleplaceholder" value></el-option>
				<el-option :label="item[label]" :value="item[val]" v-for="(item,index) in selelist" v-bind:key="index"></el-option>
			</el-select>
			<el-input :placeholder="inputplaceholder" class="inputS" v-on:blur="blurF" v-model="inputV"></el-input>
			<i class="iconfont icon-sousuo searchicon"></i>
		</div>
	</div>
</template>
<style scoped>
	.inputSearch {
		display: inline-block;
		border: 1px solid #cccccc;
	}

	.searchCont {
		display: flex;
		position: relative;
	}

	.elselect {
		border-radius: 0px;
	}

	.searchCont>>>.el-input input {
		border-radius: 0px;
		border: 0px;
		display: inline-block;
	}

	.searchCont>>>.elselect input {
		color: #18ceb4;
	}

	.searchicon {
		position: absolute;
		right: 10px;
		display: inline-block;
		width: 26px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		top: calc(50% - 12px);
		top: -moz-calc(50% - 12px);
		top: -webkit-calc(50% - 12px);
		font-size: 20px;
		color: #18ceb4;
	}

	.searchCont>>>.inputS input {
		padding-right: 36px !important;
	}
</style>
<script>
	export default {
		name: "inputSearch",
		props: {
			selelist: Array, //下拉框的数据列表
			label: String, //下拉框显示的值的key
			val: String, //下拉框值的key
			seleplaceholder: String, //下拉框的placeholder
			inputplaceholder: String, //输入框的placeholder
			haveseleValue: String //初始选中的值
		},
		data() {
			return {
				seleceV: "",
				inputV: ""
			};
		},
		watch: {
			haveseleValue: {
				handler(newName, oldName) {
					this.change();
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			blurF: function() {
				var that = this;
				that.$emit("blur", that.inputV);
			},
			getValue: function() {
				var that = this;
				that.$emit("selectChange", that.seleceV);
			},
			change: function() {
				var that = this;
				that.seleceV = that.haveseleValue;
			}
		}
	};
</script>